<template>
    <el-dialog
            :visible.sync="message"
            title="登录">
        <span>
            <el-form :model="loginForm" label-width="80px" ref="loginRef" :rules="loginRule">
                <el-form-item label="用户" prop="userName">
                    <el-input v-model="loginForm.userName" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="passWord">
                     <el-input v-model="loginForm.passWord" placeholder="请输入密码"
                     type="password" :show-password="true"></el-input>
                </el-form-item>
            </el-form>
        </span>
        <span slot="footer">
            <el-button @click="quit" size="small" class="quit_btn">取 消</el-button>
            <el-button @click="login" type="primary" size="small" class="login_btn">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import {login} from "../../../network/user";

    export default {
        name: "LoginDia",
        props: {
            message: {
                type: Boolean,
                default() {
                    return false
                }
            }
        },
        data(){
            return {
                loginForm:{
                    userName:'',
                    passWord:'',
                },
                loginRule:{
                    userName:[{required:true,message:'请输入用户名',trigger:"blur"}],
                    passWord:[{required:true,message:'请输入密码',trigger:"blur"}]
                },
            }
        },
        methods: {
            clearForm() {
                this.$refs.loginRef.resetFields();
            },
            quit() {
                this.$bus.$emit('loginDia');
                this.clearForm()
            },
            login() {
                this.$refs.loginRef.validate(valid => {
                    if (valid !== true){
                        this.$message.warning('请输入用户名或密码！')
                    }else{
                        login(this.loginForm).then(res => {
                            // console.log(res);
                            if (res.data.meta.status !== 200){
                                this.$message.warning(res.data.meta.msg);
                            }else{
                                this.$store.dispatch('getSession',res.data);
                                this.$message.success(res.data.meta.msg);
                                this.$bus.$emit('loginDia');
                                this.clearForm();
                                this.$router.push('/home');
                                sessionStorage.setItem('session',res.data.session);
                            }
                        })
                    }
                });
            },
        },
    }
</script>

<style lang="less">
    .quit_btn{
        background: -webkit-linear-gradient(left bottom,skyblue,darkseagreen);
        border-color: skyblue;
    }
    .login_btn{
        background: -webkit-linear-gradient(left bottom,mediumvioletred,#f78989);
        border-color: #f78989;
    }
    .el-input{
        border-radius: 5px;
    }
</style>